/*
身份证管理
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleMultiAdd()" v-repeatClick
      >批量添加
      </el-button>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick
      >添加
      </el-button
      >
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getCardInfo" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delCardInfo" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="customerNum">
                <el-input
                  placeholder="搜索:客户号"
                  v-model="search.customerNum"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="info">
                <el-input
                  placeholder="姓名/身份证号/收货人手机"
                  v-model="search.info"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="status">
                <el-select
                  v-model="search.status"
                  placeholder="证件状态"
                >
                  <el-option
                    v-for="item in baseFormOptions.status"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="Enabled">
                <el-select
                  clearable
                  v-model="search.Enabled"
                  placeholder="是否启用"
                  style="width: 100px"
                >
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建日期" prop="date">
                <el-date-picker
                  v-model="search.date"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="query_batchId">
                <el-button type="primary" round @click="searchPage"
                >搜索
                </el-button
                >
                <el-button
                  type="warning"
                  round
                  @click="$refs.search.resetFields()"
                >重置
                </el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            :data="data"
            border
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column label="身份证信息">
              <template slot-scope="scope">
                <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.chineseName }} <span
                  style="margin-left:10px"> {{ scope.row.idCardNum }}</span></el-link>
              </template>
            </el-table-column>
            <el-table-column label="正面照片" width="100">
              <template slot-scope="scope">
                {{ scope.row.positiveImageNum ? 1 : 0 }}张
              </template>
            </el-table-column>
            <el-table-column label="反面照片" width="100">
              <template slot-scope="scope">
                {{ scope.row.reverseImageNum ? 1 : 0 }}张
              </template>
            </el-table-column>
            <el-table-column label="当前状态" prop="status">
            </el-table-column>
            <el-table-column label="收货人电话" prop="recvPhoneNum">
            </el-table-column>
            <el-table-column label="所属客户">
              <template slot-scope="scope">
                <span v-for="item in scope.row.customerNums" :key="item" style="margin-right:10px">{{ item }}</span>
              </template>
            </el-table-column>
            <el-table-column label="启用" align="center" width="100">
              <template slot-scope="scope">
                <span style="font-size: 20px">
                  <i
                    class="el-icon-circle-check"
                    style="color: #67c23a"
                    v-if="scope.row.enabled"
                  ></i>
                  <i
                    class="el-icon-circle-close"
                    style="color: #f56c6c"
                    v-else
                  ></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              sortable
              prop="createTime"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200, 500, 1000]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 批量添加身份证信息 -->
    <el-dialog
      title="批量添加身份证"
      :visible.sync="multiAddVisible"
      :close-on-click-modal="false"
      v-dialog-drag
      width="300px"
      @close="multiCustomerNum = ''"
    >
      <div style="position: relative">
        <el-input v-model="multiCustomerNum" placeholder="请输入客户号" autofocus></el-input>
        <div style="margin-top:20px;text-align: right">
          <el-button v-repeatClick @click="multiCustomerNum = ''">清空</el-button>
          <!--            <el-button type="file" style="margin-left: 10px" v-repeatClick>上传身份证</el-button>-->
          <el-upload
            hidden="hidden"
            accept=".png,.jpg,.jpeg"
            action="#"
            ref="batchUpload"
            style="margin-left: 10px"
            :auto-upload="false"
            :show-file-list="false"
            multiple
            :on-change="batchUploadImage"
          />
          <el-button type="primary" style="margin-left: 10px"
                     v-repeatClick @click="batchUpload">上传身份证
          </el-button>

        </div>
      </div>
    </el-dialog>
    <!-- 添加修改身份证信息 -->
    <el-dialog
      v-dialog-drag
      :title="title + '身份证'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="restForm"
    >
      <div style="position: relative">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="baseForm">
            <el-form
              size="small"
              :model="baseForm"
              label-position="left"
              label-width="120px"
              ref="baseForm"
              :rules="baseRules"
            >
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="chineseName" label="姓名">
                    <el-input v-model.trim="baseForm.chineseName"></el-input>
                  </el-form-item>
                  <el-form-item prop="idCardNum" label="身份证号">
                    <el-input v-model.trim="baseForm.idCardNum"></el-input>
                  </el-form-item>
                  <el-form-item prop="status" label="当前状态">
                    <el-select
                      style="width: 100%"
                      v-model="baseForm.status"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in baseFormOptions.status"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="self-textarea">
                    <el-form-item prop="recvPhoneNum" label="收货人电话">
                      <el-input v-model="baseForm.recvPhoneNum" type="textarea" :autosize="{ minRows: 4 }"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="self-textarea">
                    <el-form-item prop="customerNums" label="客户号列表">
                      <el-input v-model="baseForm.customerNums" type="textarea" :autosize="{ minRows: 4 }"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="gender" label="性别">
                    <el-select
                      filterable
                      style="width: 100%"
                      v-model="baseForm.gender"
                      placeholder="请选择性别"
                    >
                      <el-option label="先生" value="先生"></el-option>
                      <el-option label="女士" value="女士"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="national" label="民族">
                    <el-select
                      filterable
                      style="width: 100%"
                      v-model="baseForm.national"
                      placeholder="请选择民族"
                    >
                      <el-option
                        v-for="item in baseFormOptions.national"
                        :key="item"
                        :value="item"
                        :label="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="birthDay" label="出生日期">
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      v-model="baseForm.birthDay"
                      style="width: 100%"
                      type="date"
                      placeholder="请选择日期出生日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item prop="foreverValid" label="是否永久有效">
                    <el-radio-group v-model="baseForm.foreverValid">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="address" label="住址">
                    <el-input v-model="baseForm.address"></el-input>
                  </el-form-item>
                  <el-form-item prop="startValidDate" label="起始有效日期">
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      v-model="baseForm.startValidDate"
                      style="width: 100%"
                      type="date"
                      placeholder="请选择起始有效日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item prop="endValidDate" label="起始失效日期">
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      v-model="baseForm.endValidDate"
                      style="width: 100%"
                      type="date"
                      placeholder="请选择起始失效日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="self-textarea">
                    <el-form-item prop="note" label="备注">
                      <el-input v-model="baseForm.note" type="textarea" :autosize="{ minRows: 6 }"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="身份证照片" name="detailForm">
            <el-col :span="12" style="text-align: center">
              <el-upload
                class="upload-demo"
                drag
                accept=".png,.jpg,.jpeg"
                :on-change="getFile"
                action=""
                :auto-upload="false"
                :show-file-list="false"
              >
                <div class="display-img" :style="{'background-image':'url('+baseForm.positiveImage+')'}"
                     v-if="baseForm.positiveImage">
                  <div>
                    <i class="el-icon-delete" @click.stop="handleDeleteImage('positiveImage')"></i>
                  </div>
                </div>
                <img src="@/assets/img/face.jpg" v-else style="margin-top:50px"/>
                <div class="el-upload__text" style="margin-top:10px">可身份证照片正面拖到此处</div>
              </el-upload>
            </el-col>
            <el-col :span="12" style="text-align: center">
              <el-upload
                class="upload-demo"
                drag
                accept=".png,.jpg,.jpeg"
                :on-change="getFile1"
                action=""
                :auto-upload="false"
                :show-file-list="false"
              >
                <div class="display-img" :style="{'background-image':'url('+baseForm.reverseImage+')'}"
                     v-if="baseForm.reverseImage">
                  <div>
                    <i class="el-icon-delete" @click.stop="handleDeleteImage('reverseImage')"></i>
                  </div>
                </div>
                <img src="@/assets/img/back.jpg" v-else style="margin-top:50px"/>
                <div class="el-upload__text" style="margin-top:10px">可身份证照片背面拖到此处</div>
              </el-upload>
            </el-col>
            <div class="clearfix"></div>
            <div style="color:#ff5000;font-size: 16px;margin-top:20px;text-align: center">选择图片须小于
              2M，图片上传完毕后，需点击上方 “保存身份证”完成保存(只能上传jpg/png文件)
            </div>
          </el-tab-pane>
          <el-tab-pane label="复制身份证" name="copyForm" v-if="title === '修改'">
            <el-form
              size="small"
              :model="copyForm"
              label-position="left"
              label-width="120px"
              ref="copyForm"
              :rules="copyFormRules"
            >
              <el-form-item prop="order" label="请输入运单号">
                <el-input v-model="copyForm.order" type="textarea" placeholder="支持多行多个运单号复制"
                          :autosize="{ minRows: 4 }"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" v-repeat-click @click="copyCardInfo">确认复制</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="position: absolute; top: 5px; right: 0">
          <el-checkbox v-model="baseForm.enabled">启用</el-checkbox>
          <el-button
            v-if="title!='查看'"
            type="primary"
            style="margin-left: 10px"
            @click="submit"
            v-repeatClick
          ><i class="fa fa-floppy-o" style="margin-right: 10px"></i
          >保存身份证
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import fa from "element-ui/src/locale/lang/fa";

let search = {
  //客户号
  customerNum: '',
  //姓名/身份证号/收货人手机
  info: '',
  //证件状态
  status: '',
  //是否启用
  Enabled: "",
  //时间范围
  date: []
};

//身份证基本信息表单
let baseForm = {
  //姓名
  chineseName: '',
  //身份证号
  idCardNum: '',
  //状态
  status: '身份证已上传',
  //收货人电话
  recvPhoneNum: '',
  //客户列表
  customerNums: '',
  //性别
  gender: '',
  //名族
  national: '',
  //出生日期
  birthDay: '',
  //住址
  address: '',
  //起始有效日期
  startValidDate: '',
  //结束有效日期
  endValidDate: '',
  //备注
  note: '',
  //是否永久有效
  foreverValid: false,
  //身份证正面base64
  positiveImage: '',
  //身份证反面base64
  reverseImage: '',
  //是否启用
  enabled: true,
};

let copyForm = {
  order: ''
}


import myHeader from "@/components/pageHEader/pageHeader";
import {dateFormat} from "@/utils";
import {
  getCardInfo,
  getCardInfoById,
  addCardInfo,
  delCardInfo,
  modCardInfo,
  disableOrEnableCardInfo,
  copyCardInfo,
  ocrCardImage,
  batchUploadCardImage
} from "@/api/consumers/idcard";

import {getImage, addImage, delImage} from '@/api/common'

import domMessage from '@/utils/messageOnce'
import {checkIdCard} from '@/utils/validate'

const messageOnce = new domMessage()
export default {
  name: "idcard",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      treeData: [],
      //搜索
      search: this.cloneObj(search),
      //选中国家
      selectCountry: "",
      activeName: "baseForm",
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm: this.cloneObj(baseForm),
      baseRules: {
        status: [this.$RegExp.required()],
        //中文名
        chineseName: [this.$RegExp.required()],
        idCardNum: [this.$RegExp.required(), {validator: checkIdCard, trigger: 'blur'}],
      },
      detailRules: {},
      baseFormOptions: {
        status: [
          {
            label: "身份证未上传",
            value: "身份证未上传"
          },
          {
            label: "身份证无图片",
            value: "身份证无图片"
          },
          {
            label: "身份证待核实",
            value: "身份证待核实"
          },
          {
            label: "身份证已上传",
            value: "身份证已上传"
          },
        ],
        national: [
          "汉族",
          "壮族",
          "满族",
          "回族",
          "苗族",
          "维吾尔族",
          "土家族",
          "彝族",
          "蒙古族",
          "藏族",
          "布依族",
          "侗族",
          "瑶族",
          "朝鲜族",
          "白族",
          "哈尼族",
          "哈萨克族",
          "黎族",
          "傣族",
          "畲族",
          "傈僳族",
          "仡佬族",
          "东乡族",
          "高山族",
          "拉祜族",
          "水族",
          "佤族",
          "纳西族",
          "羌族",
          "土族",
          "仫佬族",
          "锡伯族",
          "柯尔克孜族",
          "达斡尔族",
          "景颇族",
          "毛南族",
          "撒拉族",
          "布朗族",
          "塔吉克族",
          "阿昌族",
          "普米族",
          "鄂温克族",
          "怒族",
          "京族",
          "基诺族",
          "德昂族",
          "保安族",
          "俄罗斯族",
          "裕固族",
          "乌孜别克族",
          "门巴族",
          "鄂伦春族",
          "独龙族",
          "塔塔尔族",
          "赫哲族",
          "珞巴族"
        ]
      },
      copyForm: this.cloneObj(copyForm),
      copyFormRules: {
        order: [this.$RegExp.required()]
      },
      // 批量添加
      multiAddVisible: false,
      multiCustomerNum: '',
      uploaded: false,
      maxUploadFileLength: 100,
      uploadEventCount: 0,
      showFileList: 'hidden'
    };
  },
  mounted() {
    let idCardNum = this.$route.query.idCardNum
    if (idCardNum) {
      this.handleAddUpdate('mod', idCardNum)
    }
    this.getCardInfo();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCardInfo()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCardInfo()
    },
    getFile(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2;                         //限制图片大小
      if (!isLt2M) {
        messageOnce.error('上传身份证图片大小不能超过 2MB!');
        return
      }
      let form = new FormData()
      form.append('image', file.raw)
      ocrCardImage(form).then(resp => {
        this.baseForm.chineseName = resp.data.name
        this.baseForm.address = resp.data.address
        this.baseForm.birthDay = resp.data.birthDay
        this.baseForm.gender = resp.data.gender
        this.baseForm.idCardNum = resp.data.idCardNum
        this.baseForm.national = resp.data.national
      }).catch(e => {
      })
      this.getBase64(file.raw).then(res => {
        this.baseForm.positiveImage = res
      })
    },
    getFile1(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2;                         //限制图片大小
      if (!isLt2M) {
        messageOnce.error('上传身份证图片大小不能超过 2MB!');
        return
      }
      this.getBase64(file.raw).then(res => {
        this.baseForm.reverseImage = res
      })
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    handleDeleteImage(type) {
      this.baseForm[type] = ''
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
      });
    },
    handleBeforeUpdate() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleMultiAdd() {
      this.multiAddVisible = true
    },
    handleAddUpdate(row, id) {
      this.activeName = "baseForm";
      //修改处理
      if (row) {
        getCardInfoById(id || row.id).then(resp => {
          let row = resp.data
          //将数据复制给form
          this.handleModform(row, this.baseForm);
          this.baseForm.customerNums = this.baseForm.customerNums.join(",")
          this.baseForm.id = row.id;
          this.dialogFormVisible = true;
          this.title = "修改";
        })
      } else {
        this.baseForm = this.cloneObj(baseForm);
        this.title = "添加";
        this.dialogFormVisible = true;
      }
    },
    getCardInfo() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        enabled: this.search.Enabled,
        customerNum: this.search.customerNum,
        info: this.search.info,
        status: this.search.status,
        ...this.handleDate(this.search.date, 'beginDate', 'endDate')
      };
      getCardInfo(query).then((resp) => {
        this.data = resp.data.records
        this.total = resp.data.total;
      });
    },
    //搜索
    searchPage() {
      this.currentPage = 1
      this.pageSize = 20
      this.getCardInfo()
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = this.cloneObj(this.baseForm)
          submit.customerNums = submit.customerNums.split(/[\n,，]/g)
          let request;
          if (this.title == "添加") {
            request = addCardInfo(submit);
          } else {
            request = modCardInfo(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getCardInfo();
          });
        } else {
          this.activeName = "baseForm";
        }
      });
    },
    copyCardInfo() {
      this.$refs["copyForm"].validate((valid) => {
        if (valid) {
          copyCardInfo(this.baseForm.id, this.copyForm.order.split('\n')).then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getCardInfo();
          });
        } else {
          this.activeName = "baseForm";
        }
      });
    },
    //查看身份证信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看';
    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let ids = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用身份证信息, 是否继续?";
      } else {
        tip = "此操作将禁用身份证信息, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableCardInfo(ids, {enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getCardInfo();
        });
      });
    },
    //删除身份证信息
    delCardInfo() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delCardInfo(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getCardInfo();
          }
        );
      });
    },
    batchUpload() {
      if (this.multiCustomerNum === '') {
        this.$message.error('客户号不能为空！')
      } else {
        this.$refs["batchUpload"].$refs["upload-inner"].handleClick();
      }
    },
    // 事件会触发两次,但是只有第二次的数据才是对的,所以做了一个处理
    batchUploadImage(file, fileList) {
      if (fileList.length === 0) {
        return;
      }
      const currentEventCount = ++this.uploadEventCount
      setTimeout(() => {
        // 最后一次才发请求
        if (this.uploadEventCount === currentEventCount) {
          let formData = new FormData()

          for (let i = 0; i < fileList.length; i++) {
            formData.append("files", fileList[i].raw)
          }
          batchUploadCardImage(this.multiCustomerNum, formData).then(resp => {
            // 上传完了再将uploaded改为false
            this.uploaded = false
            this.multiAddVisible = false
            this.multiCustomerNum = ''
            this.uploadEventCount = 0
            this.$message.success(resp.message || "成功");
            // this.getCardInfo();
            setTimeout(() => {
              window.location.reload()
            },2000)
          }).catch(error => {
            console.log(error)
            this.$message.error("上传失败");
            this.multiAddVisible = false
            this.multiCustomerNum = ''
            this.uploadEventCount = 0
            setTimeout(() => {
              window.location.reload()
            },2000)
          })
        }
      },1000)
    }
  },
};
</script>

<style scoped lang='scss'>
.self-textarea {
  /deep/ .el-form-item__content {
    margin-left: 0px !important;
  }
}

.display-img {
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;

  div {
    background: rgba(0, 0, 0, .3);
    height: 30px;
    display: none;
  }

  i {
    font-size: 16px;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  &:hover div {
    display: block;
    z-index: 10000;
  }
}
</style>
